import { Outlet, useSearchParams } from "react-router-dom";
import QueryNavLink from "../components/query-navlink";
import { getInvoices } from "../data";

export default function Invoices() {
  const invoices = getInvoices();
	const [search, setSearch] = useSearchParams();
	// console.log('search :>> ', search);
	return (
		<div style={{display: 'block'}}>
				<h1>Router Link</h1>
			<nav
				style={{border: 'black solid 1px',paddingBottom: '1rem'}}
			>
				<input
					value={search.get("filter") || ""}
          onChange={event => {
            let filter = event.target.value;
            if (filter) {
              setSearch({ filter });
            } else {
              setSearch({});
            }
          }}
				/>
				{invoices.filter(invoice=>{
					const filter = search.get("filter");
					if(!filter) return true
					const name = invoice.name.toLowerCase();
					return name.startsWith(filter.toLowerCase())
				}).map(invoice =>(
					// <Link 
					// 	style={{ display: "block", margin: "1rem 0" }}
					// 	to={`/invoices/${invoice.number}`}
					// 	key={invoice.number}
					// >
					// 	{invoice.name}
					// </Link>
					<QueryNavLink 
						style={({isActive})=>{
							return {
								display: "block",
                margin: "1rem 0",
                color: isActive ? "red" : ""
							}
						}}
						to={`/invoices/${invoice.number}`}
						key={invoice.number}
					>
						{invoice.name}
					</QueryNavLink>
				))}
			</nav>
			<Outlet />
		</div>
	);
}